<template>
  <div class="content-pagination">
    <a-pagination
      v-if="emptyShow || total > 0"
      v-model:current="current"
      v-model:page-size="pageSize"
      :total="total"
      :show-total="settingsStore.showTotal"
      :page-size-options="settingsStore.pageSizeOptions"
      :showSizeChanger="true"
      @change="pageChange"
    />
  </div>
</template>
<script setup lang="ts" name="Pagination">
import { useSettingsStore } from '@/stores/settings'
import { computed, watch } from 'vue'
const settingsStore = useSettingsStore()
const emit = defineEmits(['update:pageSize', 'update:current', 'paginationChange'])
const props = defineProps({
  current: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 10
  },
  total: {
    type: Number,
    default: 0
  },
  emptyShow: {
    type: Boolean,
    default: false
  }
})
const current = computed({
  get() {
    return props.current
  },
  set(val: number) {
    emit('update:current', val)
  }
})
const pageSize = computed({
  get() {
    return props.pageSize
  },
  set(val: number) {
    emit('update:pageSize', val)
  }
})
const total = computed(() => props.total)
const pageChange = (page: number, pageSize: number) => {
  emit('update:pageSize', pageSize)
  emit('update:current', page)
  emit('paginationChange', page, pageSize)
}

watch(
  () => props.total,
  () => {
    // 如果当前页码大于最大页码，则跳转到第一页
    if (current.value > Math.ceil(props.total / props.pageSize)) {
      pageChange(1, props.pageSize)
    }
  }
)
</script>
<style></style>
